<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>分析生命周期</title>
	<!-- 引入Vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<!-- 准备好一个容器-->
	<div id="root" :x="n">
		<h2 v-text="n"></h2>
		<h2>当前的n值是：{{n}}</h2>
		<button @click="add">点我n+1</button>
		<button @click="bye">点我销毁vm</button>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	// 通过new关键字创建vue实例
	new Vue({
		// 测试通过el属性配置模块
		el: '#root',

		// 测试通过template配置模板，<template>标签不能作为根标签使用，vue3有一个专门标签可做根标签
		// template:`
		// 	<div>
		// 		<h2>当前的n值是：{{n}}</h2>
		// 		<button @click="add">点我n+1</button>
		// 	</div>
		// `,
		data: {
			n: 1
		},
		methods: {
			add() {
				console.log('add')
				this.n++
			},
			bye() {
				console.log('bye')
				// 调用vue实例的销毁方法
				this.$destroy()
			}
		},
		watch: {
			n() {
				console.log('n变了')
			}
		},

		// beforeCreate，在数据监测、数据代理创建前，获取不到_data
		beforeCreate() {
			console.log('beforeCreate')
			console.log(this)
			console.log(this._data)
			// 前端打断点,每测一个打一个
			// debugger;
		},
		// created，在生命周期、数据监测、数据代理创建后，获取到_data
		created() {
			console.log('created')
			console.log(this)
			console.log(this._data)
			// debugger;
		},
		// beforeMount，挂载页面之前
		beforeMount() {
			console.log('beforeMount')
			console.log(this)
			// 在断点时，去控制台操作DOM，但断点一放就回复原来样子，在这里所有DOM操作，最终都不生效
			// debugger; 
		},
		// mounted，挂载页面
		mounted() {
			console.log('mounted')
			console.log(this) 
			// 输出vm实例中虚拟DOM转为的真实DOM
			console.log(this.$el instanceof HTMLElement)
			// 尽可能避免手动操作DOM，但这里测试有效，不用debugger
			//document.querySelector("h2").innerText=123

		},
		// 更新之前
		beforeUpdate() {
			console.log('beforeUpdate')
			console.log(this.n)
			// debugger
		},
		// 更新后
		updated() {
			console.log('updated')
			console.log(this.n)
			debugger
		},
		// 销毁前
		beforeDestroy() {
			console.log('beforeDestroy')
			// 访问销毁前的数据data和方法methods，但进入销毁流程后，只能访问，不能操作数据，做一些收尾操作。
			console.log(this);
			console.log(this.n);

		},
		// 销毁后
		destroyed() {
			console.log('destroyed')
			console.log(this);
		},
	})
</script>

</html>